<template>
	<view class="_rel _wrapper" v-menus:right="rMenus">
		<view class="_wrapper _flex-y">
			<view class="_wrapper _p10 _flex-item-1 _flex-space-x">
				<template v-for="app in apps">
					<app :text="app.name" imgSrc="" @click="openWin(app)"></app>
				</template>
			</view>
			<view class="_flex _flex-start _flex-space-x _wrapper-x _p5 _text-a-c tar-box">
				<template v-for="win in wins">
					<view class="tar-item _cart" :class="{ 'tar-item-active': win.show }" @click="selectWin(win)">{{win.title}}</view>
				</template>
			</view>
		</view>
		<view class="_fix-rb">
			<el-avatar @click="drawer = true">AI</el-avatar>
		</view>
		<el-drawer v-model="drawer" :with-header="false">
			<el-tabs type="border-card" class="demo-tabs">
				<el-tab-pane label="功能">
					<view class="_flex-space-x">
						<app text="创建应用" imgSrc=""></app>
					</view>
				</el-tab-pane>
				<el-tab-pane label="资源">Role</el-tab-pane>
			</el-tabs>
		</el-drawer>
		<template v-for="(win, _index) in wins">
			<win :title="win.title" v-show="win.show" :cusComponent="win.cusComponent" @close="wins.splice(_index, 1)" @hidden="win.show = false"></win>
		</template>
	</view>
</template>

<script>
	import app from "./components/app.vue";
	import win from "./components/win.vue";
	import appsConfig from "../apps-config.js";
	import { markRaw } from "vue";

	export default {
		components: {
			app, win
		},
		data() {
			return {
				currentComponent: undefined,
				dialogVisible: false,
				drawer: false,
				winZIndex: 1,
				wins: [],
				apps: appsConfig,
				rMenus: {
					menus: [{
						label: "新建标签",
						tip: '标签',
						click: () => {
							window.history.back(-1);
						}
					}, {
						label: "新建文件夹",
						tip: '文件夹',
						click: () => {
							window.history.back(-1);
						}
					}]
				}
			}
		},
		mounted() {
			this.$toolUni.hideWindow();
		},
		methods: {
			openWin(app) {
				this.wins.forEach(win => win.show = false);
				let currWin = this.wins.find(win => win.code === app.code);
				if (!currWin) {
					this.wins.push(currWin = { title: app.name, code: app.code, cusComponent: app.cusComponent, show: false })
				}
				currWin.show = true;
			},
			selectWin(currWin) {
				if (this.wins.find(win => win.show === true) !== currWin) {
					this.wins.forEach(win => win.show = false);
					currWin.show = true;
				} else {
					currWin.show = false;
				}
			}
		}
	}
</script>

<style scoped>
	.tar-box {
		z-index: 9999;
	}
	.tar-item {
		width: 120px;
		font-size: 12px;
	}
	.tar-item-active {
		background-color: cornsilk;
	}
</style>
